<template>
  <view class="flex bg-#F5F5F5 rounded-md px-3 py-4 mb-3"
    @click="navigate(data.is_join ? `/package_society/pages/society/index?club_id=${data.club_id}` : `/package_society/pages/society/detail?id=${data.club_id}`)">
    <u-image width="210" height="140" border-radius="12" :src="data.club?.cover_image" />
    <view class="ml-3 flex-1 flex flex-col text-single">
      <view class="flex-1 flex">
        <view class="flex-1 c-#333 text-28 text-single">{{ data.club?.club_name }}</view>
      </view>

      <view class="c-#B5B5B5 text-24 text-single mb-1">{{ data.club?.club_introduce }}</view>
      <view class="flex items-center">
        <view class="flex-shrink-0 flex relative h-32 mr-1" :style="{ 'width': (data.avatar_info.length * 16) + 'rpx',}">
          <view v-for="(avatar, index) in data.avatar_info" :key="index" class="rounded-full bg-#808080 border-avatar"
            :style="{ 'position': 'absolute', 'left': (index * 16) + 'rpx', 'z-index': 10 - index }">
            <u-image v-if="index <= 4" shape="circle" width="32" height="32"
              :src="avatar?.user?.avatar ?? '/static/images/user/ic_def_avatar.png'"></u-image>
          </view>
        </view>
        <view class="c-#B5B5B5 text-24 ml-2 text-single">创建人：{{ data?.creator?.nickname }}</view>
        <view class="w-2 h-22 mx-2 bg-#B5B5B5" />
        <view class="c-#B5B5B5 text-24">成员：{{ data?.club?.member_number }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { navigate } from '@/common/util/uni'
defineProps({
  data: Object,
  is_self: Boolean
})
</script>

<style lang='scss' scoped></style>
